<template>
  <div>
    <h2>v-model的原理</h2>
    <!-- 在template区域，如果使用事件对象，则使用￥event -->
    <!-- <input type="text" :value="lisi" @input="onInput" /> -->
    <input type="text" :value="lisi" @input="uname = $event.target.value" />
    <!-- 综上所述：对于输入框来说v-model相当于 :value+@input -->
    <input
      type="checkbox"
      :checked="flag"
      @change="flag = $event.target.checked"
    />
    <!-- 综上所述：对于单个复选框来说v-model相当于 :checked+@change -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "zhangsan",
    };
  },
  // methods: {
  //   onInput(e) {
  //     this.uname = e.target.value;
  //   },
  // },
};
</script>

<style></style>